<template>
    <div>
        <van-nav-bar title="订单详情" left-text="" left-arrow @click-left="$router.back()" />
        <div class="container">
            <van-empty image-size="50" style="background-color: #7f8ea3"
                image="https://img.tukuppt.com/ad_preview/00/42/55/ktDzeH8Qcx.jpg!/fw/260">
                <p>
                    <span style="margin-bottom: 10px;">已取消</span>
                    <span>您的订单已取消</span>
                </p>
            </van-empty>

            <div class="order">
                <van-cell is-link value="费用明细">
                    <template #title>
                        <view class="van-cell-text">订单总额</view>
                        <view style="margin-left: 10px; color: red">￥643.0</view>
                    </template>
                </van-cell>
                <van-button plain hairline color="blue" @click="$router.push('/detail')">再次预定</van-button>
            </div>

            <div class="user">
                <van-cell-group inset>
                    <van-cell title="预计到店时间" value="03月16日 14:00" label="酒店将尽量为您保留房间" />
                </van-cell-group>

                <van-cell-group :border="false">

                    <van-field label="入住人" placeholder="张三三.李四"  input-align="right" />
                    <van-field label="联系手机" placeholder="1526555555" input-align="right" />
                    <van-field label="房间信息" placeholder="标准大床房 1间" input-align="right" />
                    <van-field label="入住日期" placeholder="03月16日~03月17日 (1晚)" input-align="right" />
                    <van-field label="下单时间" placeholder="2023-03-16" input-align="right" />
                    <van-field label="订单编号" placeholder="G42121212121" input-align="right" />
                </van-cell-group>
            </div>
        </div>


    </div>
</template>

<style>
.van-empty {

    height: 150px;
    display: flex;
    flex-direction: row;
    align-content: center;
    color: white;
}

.van-empty p {
    display: flex;
    flex-direction: column;
    height: 65px;
}

.van-empty span {
    margin-left: 20px;
    font-size: 16px;
}

.order {
    width: 80%;
    margin: -30px auto 0;
    background-color: #f5f5f5;
    position: relative;
}

.van-cell {
    font-size: 15px;
    height: 80px;
    display: flex;
    align-items: center;
}

.van-button {
    position: absolute;
    top: 90%;
    left: 30%;
    width: 140px;
}

.user {
    margin-top: 80px;
    margin-bottom: 20px;
}
.van-cell-group .van-field{
    height: 58px;
}
</style>

